<template>
  <div>
    <el-row>
      <el-col class="prowcss1" :span="2">
        <div style="width: 100%;">
          <span class="pspancss">项目统计</span>
        </div>
      </el-col>
      <el-col class="prowcss2" :span="22">
        <div class="pdiv1">
          <div class="pdiv2">
            <el-cascader-panel :clearable="true" @change="refind($event)" @expand-change="refind2($event)" :options="typeList"></el-cascader-panel>
          </div>
          <div class="pdiv3">
            <div id="project1" class="pediv"></div>
            <div id="project2" class="pediv"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getProjectBrand, getProjectBugProblemTyp,findProjectMaturity } from "@/api/business/project"
export default {
  name: 'ProjectStatistics',
  data() {
    return {
      typeList: [
        {},
      ],
      sourceData: [],
      queryParam: {
        custom:null,
        model:null
      }
    };
  },
  mounted() {
    this.getProjectBugPT()
    this.getProjectMaturity()
  },
  created() {
    this.getBrandAndModel()
  },
  methods: {
    // 初始化Echarts
    initEchart1(data) {
      var myChart = echarts.init(document.getElementById('project1'));

      const option1 = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '70%'],
            radius: '75%',
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                width: 7,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 20,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#464646',
              fontSize: 20,
              distance: -60,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 1) {
                  return '100%';
                } else if (value === 0.8) {
                  return '80%';
                } else if (value === 0.6) {
                  return '60%';
                } else if (value === 0.4) {
                  return '40%';
                } else if (value === 0.2) {
                  return '20%';
                }
                return '0%';
              }
            },
            title: {
              offsetCenter: [0, '-10%'],
              fontSize: 20
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + '';
              },
              color: 'inherit'
            },
            data: [
              {
                value: data?data:0,
                name: '成熟度'
              }
            ]
          }
        ]
      };
      myChart.setOption(option1);
    },
    initEchart2(data) {
      var myChart1 = echarts.init(document.getElementById('project2'));

      const option2 = {
        dataset: {
          source: data?data:[]
        },
        grid: { containLabel: true },
        xAxis: { name: '数量' },
        yAxis: { type: 'category',name:'问题类别' },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: '数量',
              // Map the "product" column to Y axis
              y: 'type'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ]
      };
      myChart1.setOption(option2);
      

    },
    // 销毁Echarts
    destoryChar1(){
      if(echarts.getInstanceByDom(document.getElementById('project1'))){
        echarts.dispose(document.getElementById('project1'))
      }
    },
    // 销毁Echarts
    destoryChar2(){
      if(echarts.getInstanceByDom(document.getElementById('project2'))){
        echarts.dispose(document.getElementById('project2'))
      }
    },
    getBrandAndModel() {
      getProjectBrand().then(res => {
        this.typeList = res.data ? res.data : this.typeList
        // console.log(res)
      })
    },
   async getProjectBugPT() {
    await getProjectBugProblemTyp(this.queryParam).then(res => {
        this.initEchart2(res.data);
      })
    },
    // 获取项目成熟度数据
    async getProjectMaturity(){
      await findProjectMaturity(this.queryParam).then(res => {
        this.initEchart1(res.data);
      })
    },
    refind(event){
      this.queryParam.custom=event[0]
      this.queryParam.model=event[1]
      this.destoryChar1()
      this.destoryChar2()
      this.getProjectBugPT()
      this.getProjectMaturity()
    },
    refind2(event){
      this.queryParam.custom=event[0]
      this.queryParam.model=null
      this.destoryChar1()
      this.destoryChar2()
      this.getProjectBugPT()
      this.getProjectMaturity()
    }
  },
};
</script>

<style>
.prowcss1 {
  height: 400px;
  border-right: 2px solid rgb(52, 176, 225);
}

.prowcss2 {
  height: 400px;
  height: 400px;
  border-top: 2px dashed rgb(52, 176, 225);
  border-right: 2px dashed rgb(52, 176, 225);
  border-bottom: 2px dashed rgb(52, 176, 225);
}

.pdiv1 {
  width: 100%;
  height: 400px;
}

.pdiv2 {
  width: 27%;
  height: 400px;
  float: left;
}

.pdiv3 {
  width: 73%;
  float: left;
  height: 400px;
}

.pspancss {
  writing-mode: vertical-rl;
  text-align: center;
  margin-top: 160px;
  color: rgb(26, 112, 146);
  font-weight: bolder;
  font-size: 20px;
  text-shadow: 0px 0px 6px rgb(26, 112, 146);
  letter-spacing: 0.5em;
  font-family: "微软雅黑";
}

.pediv {
  width: 50%;
  float: left;
  height: 400px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-cascader-panel {
  /* //去掉圆角 */
  display: flex;
  border-radius: 0px;
  font-size: 14px;
  margin-left: 0px;
  height: 400px;
}

.el-cascader-menu {
  /* //修改item的最大最小宽度 */
  min-width: 150px;
  max-width: 150px;
  box-sizing: border-box;
  color: #606266;
  border-right: solid 1px #E4E7ED;
}

.el-cascader-menu__wrap {
  /* //高度占满 */
  height: 100%;
}

.el-scrollbar__wrap {
  /* //修改横向不加滑动条 */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

/*.el-cascader-menu__list {*/
/*  position: relative;*/
/*  min-height: 100%;*/
/*  margin: 0;*/
/*  padding: 6px 0;*/
/*  list-style: none;*/
/*  box-sizing: border-box;*/
/*}*/

/*.el-cascader-node {*/
/*  position: relative;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  padding: 0 30px 0 20px;*/
/*  height: 34px;*/
/*  line-height: 34px;*/
/*  outline: 0;*/
/*}*/

.el-cascader-node__label {
  /* flex: 1; //修改label宽度根据内容大小填充 */
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-cascader-node__postfix {
  /* position: absolute; //修改右侧箭头的位置 */
  right: 20px;
}
</style>
